import type { ComponentSize } from 'element-plus';
import { defineStore } from 'pinia';
import { store } from '../index';

interface AppState {
  /** 标题 */
  title: string;
  /** 当前尺寸 */
  currentSize: ComponentSize;
  /** 尺寸映射 */
  sizeMap: ComponentSize[];
  /** 布局类型 */
  layout: LayoutType;
  /** 是否显示logo */
  logo: boolean;
  /** 是否折叠菜单 */
  collapse: boolean;
  /** 是否唯一打开子菜单 */
  uniqueOpened: boolean;
  /** 全局页面加载状态 */
  pageLoading: boolean;
  /** 主题颜色,是否是深色主题 */
  isDark: boolean;
}

export const useAppStore = defineStore('app', {
  state: (): AppState => {
    return {
      title: import.meta.env.VITE_APP_TITLE,
      currentSize: 'default',
      sizeMap: ['default', 'small', 'large'],
      layout: 'classic',
      logo: true,
      collapse: false,
      uniqueOpened: false,
      pageLoading: false,
      isDark: false
    };
  },
  getters: {},
  actions: {
    setIsDark(val: boolean) {
      this.isDark = val;
      document.documentElement.classList.toggle('dark', this.isDark);
      document.documentElement.classList.toggle('light', !this.isDark);
    }
  },
  persist: true
});

export const useAppStoreWithOut = () => {
  return useAppStore(store);
};
